const path = require('path'); // Импортируем модуль "path" для работы с путями файлов
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    entry: './main.js', // Точка входа для сборки проекта
    output: {
        filename: 'index.js', // Имя выходного файла сборки
        path: path.resolve(__dirname, 'dist'), // Путь для выходного файла сборки
        publicPath: '/dist/',
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // Регулярное выражение для обработки файлов с расширением .vue
                loader: "vue-loader"
                // use: ['style-loader', 'css-loader'], // Загрузчики, используемые для обработки CSS-файлов
            },
            {
                test: /\.scss$/, // Регулярное выражение для обработки файлов с расширением .scss
                use: [
                    'vue-style-loader', // Это модули которые этим занимаются
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/i, // Регулярное выражение для обработки шрифтов
                type: 'asset/resource',
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/i, // Регулярное выражение для обработки файлов картинок
                type: 'asset/resource'
            }
        ],
    },
    plugins: [
        new VueLoaderPlugin(), // А это плагины которые нам помогают объяснить ёбаному вебпаку че мы от него хотим
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'), // Каталог для статики
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
        historyApiFallback: true,
    },
    mode: 'development', // Режим сборки
};
